<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>目美预约</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <link href="/stylesheets/somethingfromamaze.css" rel="stylesheet">
    <link href="/stylesheets/global.css" rel="stylesheet">
    <!--<link href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css" rel="stylesheet">-->
    <!--<script scr="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.css"></script>-->
    <!--<script scr="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css"></script>-->
    <!--<script scr="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script>-->
    <script scr="http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.js"></script>
    <script scr="http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.ie8polyfill.min.js"></script>
    <script scr="http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.widgets.helper.min.js"></script>

    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.5.2/css/amazeui.min.css" />
    <script src="/uikit/js/uikit.min.js"></script>
    <script src="/uikit/js/uikit.min.js"></script>


    <link rel="stylesheet" href="/weui/weui.css"/>
    <link rel="stylesheet" href="/weui/example.css"/>
    <script src="/weui/zepto.min.js"></script>
    <script src="/weui/example.js"></script>
    <link rel="stylesheet" href="/layer/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="/layer/css/layui.css">


</head>


<body style="padding: 50px 10px 20px 30px">
    <div style="padding:16px 16px 16px 16px;">
        <!-- <div class="hd"> -->
        <!-- <h1 class="page_title">目美预约</h1> -->
        <!-- <p class="page_desc">欢迎使用目美预约</p> -->
    </div>
    <div class="am-alert">
    欢迎使用目美自助预约
    </div>
    <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
    <form class="" action="confirm" id="dateform">
        <div></div>
        <input type="text" name="shop" value="${shopId}" hidden />
        <input type="text" name="technician" value="${technicianId}" hidden />
        <input type="text" name="item" value="${itemId}" hidden />
        <input type="text" name="time" value="${time}" hidden />
        <fieldset data-uk-margin><b>预约日期</b>
        <select form="dateform" type="submit" name="date" onChange="submit()">选择时间
                    <#list dates as dateValue>
                    <#if (date = dateValue)>
                        <option selected value="${dateValue}" name="date" class="am-selected" style="margin: 10px 20px;">${dateValue}</option>
                    <#else>
                        <option value="${dateValue}" name="date" class="am-selected" style="margin: 10px 20px;">${dateValue}</option>
                    </#if>
                    </#list>
        </select>
    </fieldset>
    </form>
    <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
    <#list shops as shop>
    <#if (shop.shop_id = shopId)>
        <a href="confirm?shop=${shop.shop_id}&date=${date}"><button type="button" class="am-btn am-btn-primary">${shop.shop_name}<i class="weui_icon_success_no_circle"></i></button></a>
    <#else>
        <a href="confirm?shop=${shop.shop_id}&date=${date}"><button type="button" class="am-btn am-btn-default">${shop.shop_name}</button></a>
    </#if>
    </#list>
    <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
    <ul class="am-avg-sm-8 am-thumbnails">
    <#list technicians as technician>
        <#if (technician.technician_id = technicianId)>
        <!-- <div><img class="am-radius am-img-thumbnail" alt="140*140" src="${technician.logo}" width="140" height="140" /><p>sss</p></div> -->
            <a style="margin:0 15px;width:75px;position:relative;float:left;" href="confirm?shop=${shopId}&technician=${technician.technician_id}&date=${date}"><img style="float:left" class="am-radius am-img-thumbnail" alt="75*75" width="75" height="75" src="${technician.logo}" width="140" height="140" /><span style="float:left;width: 75px;text-align: center;clear: both;">${technician.technician_name}</span><i style="float: left;position: absolute;padding: 0 24px;right: 2px;bottom: 25px;background: rgba(0,0,0,0.7);" class="weui_icon_success_no_circle"></i></a>
        <#else>
            <a style="margin:0 15px;width:75px;position:relative;float:left;" href="confirm?shop=${shopId}&technician=${technician.technician_id}&date=${date}"><img style="float:left" class="am-radius" alt="140*140" width="75" height="75" src="${technician.logo}" width="140" height="140" /><span style="float:left;width: 75px;text-align: center;clear: both;">${technician.technician_name}</span></a>
        </#if>
    </#list>
    </ul>
    <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
    <#list items as item>
        <#if (item.id = itemId)>
            <a href="confirm?shop=${shopId}&technician=${technicianId}&item=${item.id}&date=${date}"><button type="button" class="am-btn am-btn-primary">${item.name}<i class="weui_icon_success_no_circle"></i></button></a>
            <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">[${item.name}]</button> -->
        <#else>
            <a href="confirm?shop=${shopId}&technician=${technicianId}&item=${item.id}&date=${date}"><button type="button" class="am-btn am-btn-default">${item.name}</button></a>
            <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">${item.name}</button> -->
        </#if>
    </#list>
    <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
    <ul class="am-avg-sm-3 am-avg-md-4 am-avg-lg-8 am-thumbnails">
    <#list times as time>
        <#if (time.index < 20) || (time.index >= 44)>
        <#else>
            <#if (time.flag)>
            <#if (time.selected)>
                <li><a href="confirm?shop=${shopId}&technician=${technicianId}&item=${itemId}&time=${time.index}&date=${date}"><button type="button" class="am-btn am-btn-primary">${time.time}<i class="weui_icon_success_no_circle"></i></button></a></li>
                <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">[+${time.time}+]</button> -->
            <#else>
                <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">+${time.time}+</button> -->
                <li><a href="confirm?shop=${shopId}&technician=${technicianId}&item=${itemId}&time=${time.index}&date=${date}"><button type="button" class="am-btn am-btn-default">${time.time}</button></a></li>
            </#if>
            <#else>
            <#if (time.selected)>
                <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">[-${time.time}-]</button> -->
                <li><p>[${time.time} 不可预约]</p></li>
            <#else>
                <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">-${time.time}-</button> -->
                <li><p>${time.time} 不可预约</p></li>
            </#if>
            </#if>
        </#if>
    </#list>
    </ul>

    <form action="bookConfirm" method="post" onsubmit = "return checkValue();">

        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">姓名</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                        <input id="nameField" class="weui_input" type="text" name="name" placeholder="请输入客人姓名"/>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">电话</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                        <input id="mobileField" class="weui_input" type="number" name="mobile" pattern="[0-9]*" placeholder="请输入客人电话"/>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">备注</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                        <input id="markField" class="weui_input" type="text" name="mark" placeholder="请输入备注(选填)"/>
                </div>
            </div>
        </div>
        <input type="text" name="shop" value="${shopId}" hidden />
        <input type="text" name="technician" value="${technicianId}" hidden />
        <input type="text" name="item" value="${itemId}" hidden />
        <input type="text" name="time" value="${time}" hidden />
        <input type="text" name="date" value="${date}" hidden />
        </br>
        <input class="weui_btn weui_btn_primary" type="submit" value="提交">
        <!-- <a href="javascript:;" class="weui_btn weui_btn_primary" onClick="submitInfo()">按钮</a></input> -->
    </form>






    <!-- <button onclick="checkValue()">加载html</button> -->
    <a id = "submit" href="confirm?shop=${shopId}&technician=${technicianId}&item=${itemId}&time=${time}&date=" hidden></a>

    </div>
</body>

<script>
//    function test(sid){
//        sid.previousSibling.checked = true;
//        var radiostyle = document.getElementsByTagName("name")
//        var nameid = document.getElementsByClassName("tech-img");
//        for(var i=0;i<nameid.length;i++)
//        {
//            nameid[i].firstChild.nextSibling.style.border = "none"
//        }
//        sid.style.border = "1px solid blue";
//    }

    function submitInfo(){
        var form = document.getElementById("bookConfirm")
        form.submit()
    }

    function checkValue() {

        // alert(UE.getEditor('editor').getAllHtml())
        var name = document.getElementById("nameField").value
        var mobile = document.getElementById("mobileField").value

        if(name == "")
        {
            // alert('请填写预约客人姓名');
            layer.msg('请填写预约客人姓名');
            return false
        }

        if(mobile == "")
        {
            // alert('请填写预约客人电话');
            layer.msg('请填写预约客人电话');
            return false
        }
        else
        {
            return true
        }
    }
</script>
</html>